<template>
  
    <view class="uni-list">
		
		<view class="flex a-item j-content-between">
			<uni-data-select v-model="value" :localdata="range" :clear="false" @change="change"/>
			<w-select style="width:450rpx;" v-show="value===0" class="combox" filterable  defaultValue="请选择商品品牌" :list='goodsBrand' width="100%"  keyName='id' 
			ref='test'
			valueName="name" @refresh="refresh" :multiple="true" @input="brand()"/>
			<w-select style="width:450rpx;" v-show="value===1" class="combox" filterable  defaultValue="请选择商品分类" :list='goodsType' width="100%"  keyName='id' valueName="name" @refresh="refresh1" :multiple="true" @input="types()" ref='test1'/>
			<button type="primary" size="mini" @click="filtsub" style="background: #007aff;font-size: 25rpx">确定</button>
		</view>
		
		<!-- <view class="flex a-item">
			<view>商品品牌:</view>
			<w-select  class="combox" filterable showClose defaultValue="请选择商品品牌" :list='goodsBrand' width="100%"  keyName='id' valueName="name" @refresh="refresh" :multiple="true" @input="brand()"/>
		</view>
		<view class="flex a-item" style="margin:20rpx 0;">
			<view class="flex a-item">
				<view>商品分类:</view>
				<w-select  class="combox" filterable showClose defaultValue="请选择商品分类" :list='goodsType' width="100%"  keyName='id' valueName="name" @refresh="refresh1" :multiple="true" @input="types()"/>
			</view>
			<button type="primary" size="mini" @click="filtsub" style="flex-shrink: 0;background: #007aff;">确定</button>
		</view> -->
		<scroll-view @scrolltolower="rf"  scroll-y="true"  :style="{height: contentHeight + 'px'}">
        <view class="uni-list-cell flex a-item">
			<checkbox @click="toggleall" :checked="select" style="transform:scale(0.7)"/>
            <view style="width:250rpx;">商品名称</view>
            <view style="width:200rpx;">条形码</view>
            <view style="width:160rpx;">换算率</view>
            <view style="width:60rpx;text-align:center;">主单位</view>
	    </view>
        <checkbox-group>
					<label class="uni-list-cell flex a-item"  v-for="(item,index) in itemscheck" @click="checkboxChange(item,'uncheck')" :key="item.goodsId" >
						<view>
							<checkbox :value="item.goodsId"  :checked="true	"  style="transform:scale(0.7)" />
						</view>
						<view style="width:250rpx;">{{item.goodsName}}</view>
						<view style="width:200rpx;">{{item.barcode}}</view>
						<view style="width:160rpx;text-align:center;">{{item.boxUnitCount}}</view>
						<view style="width:60rpx;text-align:center;">{{item.mainUnitName}}</view>
					</label>
				<label class="uni-list-cell flex a-item" v-if="!item.checked"  v-for="(item,index) in items" @click="checkboxChange(item,'check')" :key="item.goodsId" >
					<view>
						<checkbox :value="item.goodsId"    style="transform:scale(0.7)" />
					</view>
					<view style="width:250rpx;">{{item.goodsName}}</view>
					<view style="width:200rpx;">{{item.barcode}}</view>
					<view style="width:160rpx;text-align:center;">{{item.boxUnitCount}}</view>
					<view style="width:60rpx;text-align:center;">{{item.mainUnitName}}</view>
				</label>
		</checkbox-group>
	</scroll-view>
	<button class="btn" @click="submit">提交</button>
	</view>
</template>

<script>
import { getScreen} from "../../../service/auth";
import { goodsInfo,addOrSave,getSaved } from "../../../service/api/sales";
import { getBasGoodsBrandS, childBasGoodsTypeList} from "../../../service/api/shopping";
export default {
		data() {
    		return {
				value: 0,
				range: [
				{ value: 0, text: "商品品牌" },
				{ value: 1, text: "商品分类" },
				],
				contentHeight:0,
				end:false,
        	select:false,
			customerId:null,
        	items: [],
        	itemscheck: [],
        	goodsBrand: [],
			goodsBrandIds:'',
			goodsType:[],
			goodsTypeIds:'',
			page:1,
			size:20,
			page1:1,
			page2:1,
			from:{
					page:1,
					size:20,
					visitedCustomerId:'',
					goodsBrandIds:'',
					goodsTypeIds:'',
				},
				getsaved:[]
			}
		},
		onLoad(option){
			this.customerId=option.customerId
			this.getsave()
			this.getgoodstype()
		},
		created(){
			const {width,height} = getScreen()
			this.contentHeight = height - 90
			this.getgoodsBrand()
		},
		mounted(){
		},
		methods: {
			getsave(){
				getSaved({customerId:this.customerId}).then(res=>{
				this.itemscheck=res.data
				// this.check()
					this.getgoodsInfo()
			})
			},
			check(){
				//
				// for (let i = 0; i < this.getsaved.length; i++) {
				// for (let index = 0; index < this.items.length; index++) {
				// 	if (this.getsaved[i].goodsId===this.items[index].goodsId) {
				// 		this.$set(this.items[index],'checked',true)
				// 		this.checkboxChange(this.items[index])
				// 		}
				// 	}
				// }
			},
			change(e){
			},
			checkboxChange(e,type) {
				if (type === 'check'){
					this.$set(e,'checked',true)
					const index = this.itemscheck.findIndex(item=>item.goodsId === e.goodsId)
					console.log(index)
					if (!~index)this.itemscheck.push(e)
				}else if(type === 'uncheck'){
					this.$set(e,'checked',true)
					this.itemscheck.splice(this.itemscheck.indexOf(e),1)
					const index = this.items.findIndex(item=>item.goodsId === e.goodsId)
					if (~index)this.items[index].checked = false
				}
			},
            toggleall(){
                this.select=!this.select
                if (this.select) {
                    this.items.map(item=>{
                        this.$set(item,'checked',true)
						this.checkboxChange(item)
                    })
					// this.itemscheck=this.items
                }else{
					this.items.map(item=>{
                        this.$set(item,'checked',false)
						this.checkboxChange(item)
                    })
					// this.itemscheck=[]
					}
            },
			getgoodsInfo(){
				this.from.visitedCustomerId=this.customerId
				goodsInfo(this.from).then(res=>{
					if (res.data.content.length < this.from.size)
					this.end=true

					res.data.content = res.data.content.filter(item=>!~this.itemscheck.findIndex(val=>val.goodsId === item.goodsId))
					this.items=this.items.concat(res.data.content)
				})
			},
			filtsub(){
				this.itemscheck=[]
				this.items=[]
				this.from.page=1
				this.from.goodsBrandIds=this.goodsBrandIds
				this.from.goodsTypeIds=this.goodsTypeIds
				this.getgoodsInfo()
				this.from.goodsBrandIds=this.goodsBrandIds=''
				this.from.goodsTypeIds=this.goodsTypeIds=''
				this.$refs.test.remove()
				this.$refs.test1.remove()
				console.log(this.from,'确定');
			},
			submit(){
				this.itemscheck=this.itemscheck.map(item=>{
					delete item.checked
					return item
				})
				const data={
					onSaleDetailList:this.itemscheck,
					visitedCustomerId:this.customerId
				}
				addOrSave(data).then(res=>{
					this.itemscheck.map(item=>{
						this.$set(item,'checked',true)
					})
					// uni.showToast({title:res.msg,icon:"none"})
					uni.navigateBack()
				})
			},
			getgoodsBrand(){
				const data={
					page:this.page1,
					size:this.size
				}
				getBasGoodsBrandS(data).then(res=>{}).catch(err=>{
					this.goodsBrand=this.goodsBrand.concat(err.content)
					console.log(err,'品牌');
				})
			},
			getgoodstype(){
				console.log(this.customerId,'分eeee类');
				const data={
					page:this.page2,
					size:this.size,
					// customerId:this.customerId
				}
				childBasGoodsTypeList(data).then(res=>{}).catch(err=>{
					this.goodsType=this.goodsType.concat(err.content)
					console.log(err,'分类');
				})
			},
			rf(){
				if(this.end)return
				this.from.page++
				this.getgoodsInfo()
			},
			refresh(){
				this.page1++
				this.getgoodsBrand()
			},
			refresh1(){
				this.page2++
				this.getgoodstype()
			},
			brand(e){
				console.log(e,'品牌');
				this.goodsBrandIds=e.map(item=>{
					return item.id
				}).join(',')
			},
			types(e){
				console.log(e,'分类');
				this.goodsTypeIds=e.map(item=>{
					return item.id
				}).join(',')
			}
		}
}
</script>

<style lang="scss" scoped>
.uni-list{
font-size: 30rpx;
.btn{
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #007aff;
}
.pad{
	padding: 20rpx;
}
.iptlabel{
	display: block;
    width: 20px;
    height: 20px;
	line-height: 20px;
    cursor: pointer;
    position: absolute;
	border:  1px solid #ccc;/*改变复选框的边框颜色也可以不要边框*/
    top: 6px;
    left: 6px;
	border-radius: 50%;
}
.bgc{
	background-color: aqua;
}
.uni-list-cell{
	height: 100rpx;
	padding: 10rpx 0;
    font-size: 30rpx;
	border-bottom: rgba(200, 200, 200, 0.5) 1px solid;
}
.selectbox{
	margin: 40rpx 0;
}

::v-deep .uni-stat__select{
	margin:0 15rpx;
	.uni-select__input-text{
		color:#007aff;
	}
	.uni-icons{
	display: none;
	}
}}

</style>